<template>
  <!-- 此页面template中没有可刷新页面的数据变化，拖拽会不起作用，所以加个activeInfo来使界面刷新 -->
  {{ activeInfo }}
  <Draggable class="drag_box" v-model="myArray" group="people" @start="changeDrag(true)" @end="changeDrag(false)" item-key="id">
    <template #item="{ element }">
      <div :class="'drag_item  drag_item_'+element.id ">{{ element.id }} —— {{ element.name }}</div>
    </template>
  </Draggable>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import Draggable from 'vuedraggable'
let drag = ref<boolean>(false)
interface iUser {
  id: number,
  name: string,
}
let myArray = reactive<iUser[]>([
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '孙3' },
  { id: 4, name: '孙4' },
  { id: 5, name: '孙5' },
  { id: 6, name: '孙6' },
  { id: 7, name: '孙7' },
  { id: 8, name: '孙8' },
  { id: 9, name: '孙9' },
  { id: 10, name: '孙10' },
])
let activeInfo = computed({
  get() {
    return drag.value ? '正在拖拽中...' : '没有拖拽！！';
  },
  set() { }
});
const changeDrag = function (val: boolean) {
  drag.value = val
  console.log(drag.value)
}
</script>
<style scoped>
.drag_box {
  width: 1300px;
  border-radius: 6px;
  border: 2px solid #ccc;
  padding: 0 10px;

  color-scheme: none!important;

  pointer-events: auto;
  margin: 0;
  font: inherit;
  vertical-align: baseline;
  list-style: none;
  position: relative;
  display: grid;
  padding-top: 2vh;
  user-select: none;
  grid-template-columns: repeat(auto-fill,114px);
  grid-template-rows: repeat(auto-fill,114px);
  grid-auto-flow: dense;
  grid-gap: 10px 10px;
  box-sizing: border-box;
  justify-content: center;
  //padding-bottom: 50px;
}

.drag_item {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  border: 2px solid salmon;
  margin: 10px;
  padding: 5px;
  color-scheme: none!important;
  pointer-events: auto;
  list-style: none;
  font: inherit;
  vertical-align: baseline;
  transition-duration: .3s;
  position: relative;
  grid-column: span 1;
  grid-row: span 1;
  -webkit-user-select: none;
  box-sizing: border-box;
  opacity: 1;
}

.drag_item_2 {
  width: 238px;
  //height: 100px;
  //grid-row: span 2;
  grid-column: span 2;
}

.drag_item_3 {
  width: 234px;
  height: 238px;
  grid-row: span 2;
  grid-column: span 2;
}
</style>
